<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="店铺名称">
                <a-input allow-clear placeholder="请输入店铺名称" v-model="queryParam.store_name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input allow-clear placeholder="请输入用户昵称" v-model="queryParam.nickname"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <div class="select">
                  <a-input allow-clear placeholder="请输入手机号码" v-model="queryParam.mobile"></a-input>
                  <a-button type="primary" @click="$refs.table.refresh(1)">查询</a-button>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <span slot="created_at" slot-scope="text">{{ text | timeFormat }}</span>
        <span slot="store" slot-scope="store, item">{{ item.store_name || '暂无' }} (ID: {{ item.store_id }})</span>
        <span slot="saas_user" slot-scope="user_list, scope">
          <div class="name"   v-if="scope.avatar && scope.name">
            <div class="pic">
              <img :src="scope.avatar ? scope.avatar : user_list[0].avatar_url" alt="" />
            </div>
            <div class="info">
              <span>{{ scope.name }}</span>
              <span>{{ scope.mobile }}</span>
            </div>
          </div>
          <div v-else>-</div>
        </span>
        <span slot="user_list" slot-scope="user_list, scope">
          <div class="name" v-if="user_list.length > 0">
            <div class="pic">
              <img :src="user_list[0].avatar_url" alt="" />
            </div>
            <div class="info">
              <span>{{ user_list[0].nickname }}</span>
              <span>{{ scope.mobile }}</span>
            </div>
          </div>

          <div v-else>
            <div v-if='scope.mobile === ""'>暂未绑定手机号</div>
            <div v-else>暂无</div>
          </div>
        </span>
        <span slot="parent_list" slot-scope="parent_user_list, parent_item, scope">
          <template v-if="parent_user_list.length > 0">
            <a-tooltip placement="top">
              <template slot="title">
                <span>推荐人</span>
              </template>
              <span class="parentName" @click="showSub(parent_item)">{{ parent_user_list[0].nickname }}</span>
            </a-tooltip>
          </template>
          <span v-else>平台</span>
        </span>
        <span slot="action" slot-scope="text, record">
        <template>
          <a-button type="link" @click="handleEdit(record)" size="small">查看</a-button>
          <!-- <a-divider type="vertical" />
          <a-button type="link" @click="handleRecharge(record)" size="small">编辑</a-button> -->
          <!-- :trigger="['click']" -->
        </template>
      </span>
      </s-table>
    </a-card>
    <!-- 展示下级用户的弹窗 -->
    <a-modal v-model="showJunior" title="关联商城" @ok="showJunior = false">
      <a-table
        style="overflow-y: auto;max-height:500px;"
        rowKey="id"
        :columns="userColumns"
        :pagination="false"
        :data-source="parent_user_list"
      >
        <span slot="store" slot-scope="store, item">{{ item.store_name }}(ID: {{ item.store_id }})</span>
        <span slot="userinfo" slot-scope="avatar_url, item">
          <img style="width: 45px; heigth: 45px; border-radius: 5px; margin-right: 10px" :src="item.avatar_url" />
          <ellipsis :length="20" tooltip>{{ item.nickname }}</ellipsis>
        </span>
      </a-table>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getList } from '@/api/saas/user'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '联盟用户',
    dataIndex: 'saas_user',
    scopedSlots: {
      customRender: 'saas_user',
    },
    width: 250,
  },
  {
    title: '商城用户',
    dataIndex: 'user_list',
    scopedSlots: {
      customRender: 'user_list',
    },
    width: 250,
  },
  {
    title: '推荐人',
    dataIndex: 'parent_user_list',
    scopedSlots: {
      customRender: 'parent_list',
    },
  },
  {
    title: '来源商城',
    dataIndex: 'store_id',
    scopedSlots: {
      customRender: 'store',
    },
  },
  {
    title: '加入时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const userColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户信息',
    dataIndex: 'avatar_url',
    scopedSlots: {
      customRender: 'userinfo',
    },
  },
  {
    title: '商城',
    dataIndex: 'store_id',
    scopedSlots: {
      customRender: 'store',
    },
  },
]

export default {
  name: 'SaasStoreList',
  components: {
    STable,
  },
  data() {
    return {
      columns,
      userColumns,
      loadData: (parameter) => {
        return getList({ ...parameter, ...this.queryParam })
          .then((res) => {
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
      // 当前展示的下级列表
      parent_user_list: [],
      // 是否显示下级弹窗
      showJunior: false,
      queryParam: {
        store_name: '',
        nickname: '',
        mobile: '',
      },
    }
  },
  methods: {
    // 点击展示下级
    showSub(item) {
      console.log(item)
      this.parent_user_list = item.parent_user_list
      this.showJunior = true
    },
    handleEdit (record) {
      console.log(record)
      this.$router.push('/saas/user-detail/?saas_user_id=' + record.id)
    },
  },
}
</script>

<style scoped lang="less">
.name {
  display: flex;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      color: rgba(0, 0, 0, 0.45);
      margin-top: 6px;
    }
  }
}
.parentName {
  color: #1890ff;
  cursor: pointer;
}
.parentName:hover {
  text-decoration: underline;
}
</style>
